<template>
  <!-- <li class="list" v-for="(list,index) in songs" :key="index"> -->
  <li class="list" @click="$emit('play',list)">
    <slot></slot>
    <div class="list-right">
      <p>{{list.name}}</p>
      <div class="author">
        <i v-show="list.song.privilege&&list.song.privilege.playMaxbr==999000" class="sq"></i>
        {{list.song.artists[0].name}} - {{list.name}}
      </div>
      <div class="auplay"></div>
    </div>
  </li>
</template>

<script>
export default {
  props: {
    list: Object,
    // list1: Object,
    index: Number,
  },
};
</script>

<style lang="less" scoped>
.red {
  color: red;
}
p {
  margin: 0px;
}
.list {
  position: relative;
  height: 50px;
  padding: 6px 0px 0px 0px;
  // line-height: 50px;
  margin-left: 10px;
  border-bottom: 1px solid #f4f4f4;
}

.list .list-right {
  // margin-left: 55px;
  height: 45px;
  margin-top: 5px;
  border-bottom: 1px solid #f4f4f4;
  float: left;
}
.list p {
  font-size: 17px;
  width: 26rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list .author {
  font-size: 12px;
  color: #888;
  width: 27rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list .author i {
  display: inline-block;
  width: 12px;
  height: 8px;
  margin-left: 0px;
  margin-right: 4px;
  background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=)
    no-repeat;
  background-size: 166px 97px;
}
.auplay {
  position: absolute;
  right: 10px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=)
    no-repeat -24px 0;
  background-size: 166px 97px;
}
</style>